<script lang="ts">
  interface DeviceItem {
    color: string;
    name: string;
    count: number;
    percentage: string;
  }

  const deviceList: DeviceItem[] = [
    {
      color: '#0A5DA2',
      name: '全部设备',
      count: 28,
      percentage: '25%'
    },
    {
      color: '#91cc75',
      name: '激活设备',
      count: 28,
      percentage: '25%'
    },
    {
      color: '#fac858',
      name: '激活在线',
      count: 28,
      percentage: '25%'
    },
    {
      color: '#ee6666',
      name: '激活离线',
      count: 28,
      percentage: '25%'
    }
  ];
</script>

<div class="flex flex-col gap-3">
  {#each deviceList as device}
    <div class="flex items-center text-sm text-white/80">
      <div class="relative w-4 h-4 mr-2">
        <!-- 外层镂空方块 -->
        <div class="absolute inset-0 border-2 rounded-sm" style="border-color: {device.color}"></div>
        <!-- 内层实心方块 -->
        <div class="absolute w-2 h-2 inset-[4px]" style="background-color: {device.color}"></div>
      </div>
      <span class="w-28">{device.name}</span>
      <span class="mr-4">{device.count}个</span>
      <span>{device.percentage}</span>
    </div>
  {/each}
</div>

<style>
  /* 如果需要自定义样式可以在这里添加 */
</style> 